<template>
    <div>
      <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
      <a-modal 
        v-model:visible="visible" 
        @ok="onSubmit(value)"
        okText="提交"
        cancelText="取消"
        :width="700"
        @cancel="cancel"
        >
        <div class="set-container">
          <a-row>
            <a-col :span="4">专业名称：</a-col>
            <a-col :span="7" >电力专业</a-col>
            <a-col :span="4">科室名称：</a-col>
            <a-col :span="5" >电力技术科</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">机构名称：</a-col>
            <a-col :span="10">
              <a-tree-select
                  v-model:value="value"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  tree-default-expand-all
                  :tree-data="powerTreeData"
                  @change="handleSelectedTeam(value)"
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">绝缘工具名称：</a-col>
            <a-col :span="10">
              <a-select
                  v-model:value="value1"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  tree-default-expand-all
                  :options="teamTool"
                  @change="handleChange(value1)"
              />
            </a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="4">
              <button class="add-btn" @click="handleAddQuota">添加</button>
            </a-col>
          </a-row> -->
        </div>
        <div>
            <a-table 
              :dataSource="dataSource" 
              :columns="columns" 
              :bordered="true" 
              :pagination="false"
              style="margin-bottom:10px"
              >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                  {{ record.name}}
                </template>
                <template v-else-if="column.key === 'count'">
                  {{ record.count }}
                  <!-- <a-input v-model:value="record.count" style="width: 140px"/> -->
                </template>
                <template v-if="column.key === 'unit'">
                  {{ record.unit }}
              </template>
              </template>
            </a-table>

            <a-table :dataSource="addNewInsulated" :columns="columns" :bordered="true" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                  <a-input v-model:value="record.name" style="width: 140px"/>
                  <!-- <a-select
                    v-model:value="record.name"
                    style="width: 150px"
                    :options="options"
                  >
                  </a-select> -->
                </template>

                <template v-else-if="column.key === 'count'">
                  <a-input v-model:value="record.count" style="width: 140px"/>
                </template>

                <template v-if="column.key === 'unit'">
                  <a-select
                    v-model:value="record.unit"
                    style="width: 100px"
                    :options="options1"
                  >
                  </a-select>
              </template>
              </template>
            </a-table>
        </div>
      </a-modal>
    </div>
  </template>
  <script setup>
  import { ref,reactive,onMounted,watch,toRaw, watchEffect} from 'vue';
  import { Form, message } from 'ant-design-vue'
  import request from '@/utils/request';
  import {GdQuotaApi} from '@/api/insulated-data/quota-process-data.js'

    const intValidate=(val)=>{
      if (!(/^[0-9]{1,}$/.test(val)) && (val!=='')){
        message.info('请输入数字')
      }
    }

    const props=defineProps(['powerTreeData'])
    const value=ref('')
    const value1=ref('')
    const powerTreeData = ref([]);

    const dataSource=ref([])
    const addNewInsulated=ref([])
    const tool=ref('')

    const teamTool=ref([])

    const insulatedValue=ref()
    const quotaValue=ref()
    const unitValue=ref()

    const columns=ref( [
        {
            title: '绝缘工具',
            dataIndex: 'name',
            key: 'name',
            align:'center',
        },
        {
            title: '定额数量',
            dataIndex: 'count',
            key: 'count',
            align:'center'
        },
        {
            title: '单位',
            dataIndex: 'unit',
            key: 'unit',
            align:'center'
        },
        
    ])

    const useForm = Form.useForm
    const visible = ref(false);

    // const value=ref([])
    
    const options1=ref([
    {
      value: '个',
      label: '个',
    },
    {
      value: '双',
      label: '双',
    },
    {
      value: '节',
      label: '节',
    },
  ])

    watchEffect(()=>{
      powerTreeData.value=props.powerTreeData
    })
  // onMounted(()=>{
  //   console.log(11111)
  //   const result=request.get(`/api/quota/optionalTools`)
  //   console.log(result)
  // })
  
  const handleChange=(val)=>{
    tool.value=val
    addNewInsulated.value.push({name:tool.value})
  }

    const emit=defineEmits(['loadData'])
    const showModal = () => {
        visible.value = true;
      };
      // const handleOk = e => {
      //   // console.log(e);
      //   visible.value = false;
      // };

      // const formState = reactive({
      //   name:'',
      //   count: '',
      //   unit: '',
      // });

      

    const onSubmit = async(val) => {
      console.log(val)
       const result= await request({
            url:'/api/quota/save',
            method:'post',
            data:{
              orgId:val,
              category: addNewInsulated.value[0].name,
              count: Number(addNewInsulated.value[0].count),
              speciality:2
            }
        })
          emit('loadData')
          visible.value=false  
          value.value=undefined
          value1.value=undefined
          dataSource.value=[]
          addNewInsulated.value=[]
    };

    const reset = () => {
      resetFields();
    };

      defineExpose({
        showModal
      })



    const cancel=()=>{
      value.value=''
          value1.value=''
          dataSource.value=[]
          addNewInsulated.value=[]
    }
  const handleSelectedTeam= async(value)=>{
    // const teamValue=ref([])
    // const res = await request.get(`/sys/getSubOrg`)
    // teamValue.value=res.data.data

    // const orgId=ref('')
    // for(var i=0;i < teamValue.value.length;i++){
    //     if(value===teamValue.value[i].orgName){
    //         orgId.value=teamValue.value[i].orgId
    //     }
    // }

    // console.log(value)
    //选择班组查询 
    const result2 = await request({
      url:'/api/quota/teamQuotoList',
      method:'get',
      params:{
        orgId:value
      }
    })
    dataSource.value=result2.data.data

    //根据班组查询该班组可操作的工具
    teamTool.value=[]
    // console.log(orgId.value)
    const result =await request({
      url:'/api/quota/optionalTools',
      method:'get',
      params:{
        orgId:value
      }
    })
    // console.log(result.data.data)
    for(var i=0;i<result.data.data.length;i++){
      var obj={
        value:result.data.data[i].name,
        label:result.data.data[i].name
      }
      teamTool.value.push(obj)
    }
    console.log(teamTool.value)


     
    // console.log(result2.data.data)
  }
  </script>
  <style scoped>
  .set-container{
    /* height: 100px; */
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    width: 100%;
  }
  .ant-row{
    margin-bottom: 10px;
  }
  .ant-col .add-btn{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 30px;
    width: 80px;
  }
  </style>